<template>
  <div class="login-wrapper">
    <div class="login-box view-box">
      <div v-if="status === 0">
        <div class="box-title">请输入邀请码</div>
        <div class="main-ways">
          <el-form>
            <el-form-item label="协会邀请码">
              <el-input v-model="businessCode" placeholder="邀请码">
              </el-input>
            </el-form-item>
            <div class="primary-btn" @click="bindBusiness">绑定</div>
          </el-form>
        </div>
      </div>
      <div v-if="status === 1">
        <div class="box-title">协会审核中</div>
      </div>
    </div>
  </div>
</template>

<script>

import constants from "_u/constants";

export default {
  name: 'bind-business',
  data() {
    return {
      status:-1,
      businessCode:""
    };
  },
  mounted() {
    this.status = this.$route.query.status
    this.updateSession()
  },
  methods: {
    bindBusiness(){
      let that = this
      this.$api.bindBusiness({
        businessCode:this.businessCode
      }).then((res)=>{
            if(res.data.data == null){
              this.$message.error("绑定失败，请联系客服")
            }else {
              let userInfo = res.data.data;
              window.localStorage.setItem(constants.ACCESS_TOKEN,JSON.stringify(userInfo))
              this.$message.success("申请成功，协会审核中~")
              this.status = 1
            }
      })
    },


    updateSession(){
      this.$api.updateSession().then((res)=>{
        if(res.data.data.status === 2){
          // 功能绑定
          let userInfo = res.data.data;
          window.localStorage.setItem(constants.ACCESS_TOKEN,JSON.stringify(userInfo))
          const { href } = this.$router.resolve({
            name: 'ee-self-center',
            params: {
              courseId: this.$route.params.courseId
            }
          });
          window.open(href, '_blank');
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  overflow: hidden;
  min-height: 70vh;
}

.el-form-item {
  margin-bottom: 15px;
}

.login-box {
  width: 360px;
  height: 580px;
  padding: 20px 100px;
  margin: 50px auto 0;
  background: #fff;
  border-radius: 10px;

}

.box-title {
  font-size: 28px;
  font-weight: bolder;
  margin: 20px 0;
}

.main-ways {
  display: flex;
  flex-direction: column;

  .get-sms {
    cursor: pointer;
  }

  .wait-sms {
    cursor: wait;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 20px 0;

    > div {
      cursor: pointer;
      transition: .3s;

      &:hover {
        color: #8EB9FF;
        transition: .3s;
      }
    }
  }

  .primary-btn {
    margin-top: 30px;
    width: inherit;
  }

  .notice {
    font-size: 12px;
    color: #7a7a7a;
  }
}

.other-ways {
  margin-top: 50px;
  text-align: center;
  font-size: 14px;

  .thirds {
    margin-top: 10px;
    justify-content: center;

    > div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #eaeaea;
      margin: 10px;
    }
  }
}
</style>

